<template>
    <div class="back_contain_n">	
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex">
                        <el-input clearable v-model="query.fdCode" placeholder="罚单号"></el-input>
                    </div>
                    <div class="input_flex">
                        <el-select clearable filterable v-model="query.id" placeholder="违章人">
							<el-option v-for="item in employeeList" :key="item.id" :label="item.employeeName" :value="item.id"></el-option>
						</el-select>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="query.type" placeholder="违章类型">
							<el-option label="安全纪律" value="0"></el-option>
							<el-option label="质量内控" value="1"></el-option>
							<el-option label="客户投诉" value="2"></el-option>
							<el-option label="仓储规范" value="3"></el-option>
                        </el-select>
                    </div>
                    <div class="input_flex daterange">
                        <el-date-picker v-model="time"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="违章日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
        <!-- table -->
        <sys-table  
            :tableData="tableData" 
            :tableLoading="tableLoading" 
            :tableHeader="tableHeader"
            :scopeWidth="180"
        >
            <template slot-scope="scope" slot="operate">
                <el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
            </template>
        </sys-table>
        <div class="zll-dialog">
            <popout :title="'罚单 · ' + (type == 'edit'?'审批':(type =='see'?'查看':'开具'))" :visible.sync="addDialog" v-if="addDialog" class="hr">
                <add ref="add" slot="content" :editData="editData" :type="type" :employeeList="employeeList" @refreshData="refreshData"></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton" v-if="type == 'add'" @click="()=>{this.$refs.add.submitForm('addForm')}">提交</p>
                    <p class="zll-botton" v-if="type == 'edit'" @click="()=>{this.$refs.add.submitForm('addForm')}">审批</p>
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
import Add from './add'
import {formatDate} from "@/plugins/formatDate";
export default {
    data(){
        return {
            tableLoading:true, //table刷新
            type: '',
            editData: {},
            query: {
				fdCode: '',
				id: '',
				type: '',
				status: '3',
            },
            tableData: [
                {}
            ],
            tableHeader:[],
            addDialog: false,

			time: [],
			employeeList: []
        }
    },
    methods: {
		getList(){//获取表格数据
			let self = this;

			if (this.time && this.time.length == 2){
				let startDate = new Date(self.time[0]);
				let endDate = new Date(self.time[1]);
				self.query.startTime = formatDate(startDate,'yyyy-MM-dd');
				self.query.endTime = formatDate(endDate,'yyyy-MM-dd') + ' 23:59:59';
			}

			self.tableData = [];
			self.tableLoading = true;

			self.$http({
				url: "/jinl/violation/getApprovedList",
				method: "post",
				data: JSON.stringify(self.query),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {

					self.tableHeader =  [
						{"columnValue": "fdCode", "columnName": "罚单号" },
						{"columnValue": "fdTypeCn", "columnName": "违章类型" },
						{"columnValue": "fdReason", "columnName": "违章事由" },
						{"columnValue": "fdDate", "columnName": "违章日期" },
						{"columnValue": "violatorName", "columnName": "违章人"},
						{"columnValue": "fdMoney", "columnName": "处罚金额(元)" },
						{"columnValue": "fdStatusCn", "columnName": "状态" },
						{"columnValue": "createrName", "columnName": "开单人" },
					];

					for (let data of resp.result) {
						data.createrName = data.createrName+"  "+data.createTimeFt;
						if (data.approvedName){
							data.approvedName = data.approvedName+"  "+data.fdApproveTime;
						}
					}

					self.tableData = resp.result;
					self.tableLoading = false;
				}
			})
		},

        edit(val,type) {
			let self = this;
			self.addDialog = true;

			self.$nextTick(()=> {
				self.type = type;
				self.editData = Object.assign({},val);
			});
        },

        searchReset() { //重置搜索
			this.query = {
				fdCode: '',id: '',type: '',status: '3'
			};
			this.time = [];
			this.getList();
        },
        changeView(val){
            this.viewType = val.key;
        },

		getEmployeeList(){//获取违章人下拉列表
			let self = this;
			self.$http({
				url: "/jinl/personnelManage/getPersonnelIdAndName",
				method: "post",
				data: JSON.stringify(),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {
					if (resp.result.length > 0){
						self.employeeList = resp.result;
					}
				}
			});
		}
    },
    mounted(){
		let self = this;
		self.getEmployeeList();
		self.getList();
		self.$eventBus.$on("updateWorkList",function () {
			self.addDialog = false;
			self.getList();
		})
    },
    components: {
        Add
    },
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
</style>